<template>
	<view>
		<view class="button_box">
			<view class="word_over" @tap="reStudy()">继续选词</view>
			<view class="word_over" @tap="popupShow = true">结束识记</view>
		</view>
		<view class="word_listitem d-b-c" :class="{'select':currentIndex == index}" v-for="(item, index) in list" :key="index" @tap="study(index)">
			<view class="word">{{ item.word }}</view>
			<view class="chinese" v-if="currentIndex == index && clickTimes == 2">{{ item.chinese }}</view>
		</view>
		<view class="d-b-c word_but">
			<!-- 翻页 -->
			<view class="d-c-c mt36">
				<view class="d-c-c mr20 berboxz" @tap="prevPage">
					<u-icon name="arrow-left" color="#999999" size="28"></u-icon>
				</view>
				<view class="f30 fb gray3">
					{{ currentPage }} / {{ lastPage }}
				</view>
				<view class="d-c-c ml20 berboxz" @click="nextPage">
					<u-icon name="arrow-right" color="#999999" size="28"></u-icon>
				</view>
			</view>
			<view class="cropp_icon" @tap="goAgain">
				<image src="../../static/index/cropp_icon.png" mode=""></image>
			</view>
		</view>
		<!-- 弹出框 -->
		<view class="popup d-c-c" v-show="popupShow">
			<view class="tis_box">
				<view class="tis_box_back">
					<image src="../../static/index/popup_icon.png" mode=""></image>
				</view>
				<view class="tis_box_cen">
					<view class="tis_box_cen_img">
						<image src="../../static/index/tis_icon.png" mode=""></image>
					</view>
					<view class="f36 fb mt10">提示</view>
					<view class="gray6 mt20">是否结束识记</view>
					<view class="tis_box_bot d-a-c mt36">
						<view class="tis_box_bot_yes" @tap="endStudy">确定</view>
						<view class="tis_box_bot_no" @tap="popupShow = false">取消</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgUrl: getApp().globalData.imgUrl,
				studyId: 0,
				popupShow: false, //弹出框是否显示
				currentPage: 1, //现数
				lastPage: 1, //总数
				list: [],
				currentIndex: 5,
				clickTimes: 0,
			}
		},
		onLoad(option) {
			if (!this.$store.state.isLogin) {
				uni.$u.toast('登录超时请重新登录')
				setTimeout(() => {
					uni.navigateTo({
						url: '/pages/login/login',
					});
				}, 1500)
				return false
			} else {
				if (option.studyId) {
					this.studyId = option.studyId
				}
				this.getStudyWordsList(this.studyId, this.currentPage)
			}
		},
		onBackPress(option) {
			if (option.from == 'navigateBack' || option.from == 'backbutton') {
				uni.$u.toast('若已学习完，请点击“结束识记”')
				return true
			}
			return false
		},
		methods: {
			getStudyWordsList(studyId, page) {
				this.$u.post(this.$u.api.studyWords, {
					id: this.studyId,
					page: page,
				}).then((res) => {
					let data = res.data
					this.list = []
					this.currentPage = data.current_page
					this.lastPage = data.last_page
					for (let i=0;i<data.data.length;i++) {
						let temp = data.data[i]
						// temp.click_num = 0
						this.list.push(temp)
					}
				}).catch((res) => {
					console.log(res)
				})
			},
			
			reStudy() {
				uni.navigateTo({
					url: '/pages/currhome/gopresdete?studyId='+this.studyId
				})
			},
			endStudy() {
				this.$u.post(this.$u.api.endStudy, {
					study_id: this.studyId
				}).then((res) => {
					uni.navigateTo({
						url: '/pages/currhome/learndete1?studyId=' + this.studyId
					})
				}).catch((res) => {
					console.log(res)
					uni.$u.toast(res.data.msg)
				})
			},
			// 上一页
			prevPage() {
				if (this.currentPage > 1) {
					this.currentPage--
					this.getStudyWordsList(this.studyId, this.currentPage)
					this.currentIndex = 5
				}
			},
			// 下一页
			nextPage() {
				if (this.currentPage < this.lastPage) {
					this.currentPage++
					this.getStudyWordsList(this.studyId, this.currentPage)
					this.currentIndex = 5
				}
			},
			// 学习
			study(index) {
				if (this.currentIndex == index) {
					if (this.clickTimes == 0) {
						this.clickTimes = 1
					} else if (this.clickTimes == 1) {
						this.clickTimes = 2
					} else if (this.clickTimes == 2) {
						this.clickTimes = 0
					} else {
						return false
					}
				} else {
					this.clickTimes = 1
				}
				this.currentIndex = index
				let item = this.list[index]
				// 获取单词音频
				this.$u.post(this.$u.api.wordVoice, {
					word: item.word,
					type: this.$store.state.voiceType
				}).then((res) => {
					this.utils.playAudio(this.imgUrl + res.data)
				}).catch((err) => {
					console.log(err)
					uni.$u.toast(err.data.msg)
				})
			},
			// 剪纸盒
			goAgain() {
				uni.removeStorageSync('paperBoxData')
				uni.navigateTo({
					url: '/pages/myhome/paperbox?studyId=' + this.studyId + '&page=' + this.currentPage
				})
			},
		}
	}
</script>

<style lang="less">
	page {
		// padding: 20rpx 30rpx;
	}

	.button_box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		
		.word_over {
			padding: 20rpx 30rpx 0;
			text-align: right;
			font-weight: 500;
			font-size: 26rpx;
			color: #387BEF;
			margin: 20rpx 0;
		}
	}

	.word_listitem {
		width: 689rpx;
		height: 11vh;
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 30rpx 60rpx;
		box-sizing: border-box;
		margin: 0 auto 20rpx;
		line-height: 80rpx;
		border: 1rpx solid #FFFFFF;
		color: #303133;
		font-weight: bold;
		.word {
			font-size: 36rpx;
		}
		.chinese {
			font-size: 32rpx;
		}
	}
	.select {
		border: 1rpx solid #387BEF !important;
		color: #387BEF !important;
		.word {
			font-size: 44rpx !important;
		}
		.chinese {
			font-size: 36rpx !important;
		}
	}
	.berboxz {
		border: 1rpx solid #999999;
		border-radius: 100%;
		width: 50rpx;
		height: 50rpx;
	}
	.cropp_icon{
		width: 100rpx;
		height: 100rpx;
		image{
			width: 100rpx;
			height: 100rpx;
		}
	}
	.word_but{
		padding: 5vh 30rpx 20rpx;
	}
	.popup{
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		width: 100vw;
		height: 100vh;
		background-color: rgba(0,0,0,0.6);
		z-index: 9998;
	}
	.tis_box{
		width: 490rpx;
		height: 338rpx;
		position: relative;
	}
	.tis_box_back{
		image{
			width: 490rpx;
			height: 338rpx;
		}
	}
	.tis_box_cen{
		width: 490rpx;
		height: 338rpx;
		position: absolute;
		top: 0;
		left: 0;
		text-align: center;
	}
	.tis_box_cen_img image{
		width: 97rpx;
		height: 92rpx;
		margin-top: -27rpx;
	}
	.tis_box_bot_yes{
		width: 180rpx;
		height: 70rpx;
		background: linear-gradient(90deg, #1F93FF, #387BEF);
		border-radius: 35rpx;
		text-align: center;
		line-height: 70rpx;
		color: #FFFFFF;
	}
	.tis_box_bot_no{
		width: 180rpx;
		height: 70rpx;
		background: linear-gradient(90deg, #999999, #C8C4C4);
		border-radius: 35rpx;
		text-align: center;
		line-height: 70rpx;
		color: #FFFFFF;
	}
</style>
